<template>
  <div class="layee">
    <!-- <pre v-highlight>
        <code  class="content-markdow"  v-html="content">

        </code>
      </pre> -->
    <div v-highlight class="content-markdow" v-html="content">
      {{ content.content }}
    </div>
  </div>
</template>

<style lang="scss" scope>
.layee {
  min-height: 400px;
}
.content-markdow {
  margin-bottom: 200px;
  word-wrap: break-word;
  // min-height: 1200px;
}
</style>

<script>
import marked from 'marked'
import hljs from 'highlight.js'
import '@/assets/css/markdow.scss'
import { getArticleById } from '../../api/home'
import bus from '../../lib/globalBus'
import { addReader } from '../../api/detail'

// import 'highlight.js/scss/stackoverflow-light.scss'

export default {
  data () {
    return {
      content: ''
    }
  },
  watch: {
    $route (to, from) {
      document.documentElement.scrollTop = 0
      if (this.$route.name === 'article') {
        this.getDetail()
      }
    }
  },
  mounted () {
    document.documentElement.scrollTop = 0

    // 增加阅读数量
    addReader(this.$route.params.id).then((res) => {})
    // 获取文章详情
    this.getDetail()
  },
  methods: {
    getDetail () {
      getArticleById(this.$route.params.id).then(({ data }) => {
        console.log('like', data)

        bus.$emit('likeEvt', { liked: data.liked, like: data.like })

        bus.$emit('commentEvt')
        this.content = marked(data.data.content)
      })
    }
  },
  directives: {
    highlight: {
      inserted (el) {
        const blocks = el.querySelectorAll('pre code')
        console.log(blocks)
        blocks.forEach((block) => {
          hljs.highlightBlock(block)
        })
      }
    }
  }
}
</script>
